<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortables Test Page</title>
<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.sortable.js"></script>
<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

#myul {
	width: 600px;
	height: 400px;	
}

#myul li {
 list-style-type: none;
 border: 1px solid #999;
 margin: 5px; padding: 5px;
 background: #fff;
 width: 90px;
 float: left;
}

#myul2 {
	width: 300px;
	border: 1px solid blue;
	float: left;
	position: relative;
}

#myul2 li {
 list-style-type: none;
 border: 1px solid #999;
 margin: 5px; padding: 5px;
 background: #fff;
 width: 100px;
 position: relative;
}

#myul3 {
	width: 300px;
	border: 1px solid blue;
	float: left;
}

#myul3 li {
 list-style-type: none;
 border: 1px solid #999;
 margin: 5px; padding: 10px;
 background: #fff;
 width: 100px;
 position: relative;
}

.hover {
	background: #eee;	
}

</style>
</head>
<body>

	<input type='button' value='Append new node' onclick="$('#myul2').append('<li>'+(new Date())+'</li>');"/>
	<input type='button' value='Refresh sortable' onclick=""/>

	<ul id='myul2'>
	    <li>Item 1</li>
	    <li>Item 2</li>
	    <li>Item 3</li>
	    <li>Item 4
	    	<ul>
	    		<li>Sub Item 1</li>
	    		<li>Sub Item 2</li>
	    		<li>Sub Item 3</li>
	    	</ul>	
	    </li>
	    <li>Item 5</li>
	    <li>Item 6</li>
	    <li>Item 7</li>
	    <li>Item 8</li>
	    <li>Item 9</li>
	    <li>Item 10</li>
	</ul>
	
	<ul id='myul3'>
	    <li>Item 1</li>
	    <li>Item 2</li>
	    <li>Item 3</li>
	    <li>Item 4</li>
	    <li>Item 5</li>
	    <li>Item 6</li>
	    <li>Item 7</li>
	    <li>Item 8</li>
	    <li>Item 9</li>
	    <li>Item 10</li>
	</ul>

	<br style='clear: both;' />
	<br />
	
	<ul id='myul'>
	    <li>Item 1</li>
	    <li>Item 2</li>
	    <li>Item 3</li>
	    <li>Item 4</li>
	    <li>Item 5</li>
	    <li>Item 6</li>
	    <li>Item 7</li>
	    <li>Item 8</li>
	    <li>Item 9</li>
	    <li>Item 10</li>
	    <li>Item 11</li>
	    <li>Item 12</li>
	    <li>Item 13</li>
	    <li>Item 14</li>
	    <li>Item 15</li>
	    <li>Item 16</li>
	    <li>Item 17</li>
	    <li>Item 18</li>
	    <li>Item 19</li>
	    <li>Item 20</li>
	    <li>Item 21</li>
	    <li>Item 22</li>
	    <li>Item 23</li>
	    <li>Item 24</li>
	    <li>Item 25</li>
	    <li>Item 26</li>
	    <li>Item 27</li>
	    <li>Item 28</li>
	    <li>Item 29</li>
	    <li>Item 30</li>
	    <li>Item 31</li>
	    <li>Item 32</li>
	    <li>Item 33</li>
	    <li>Item 34</li>
	    <li>Item 35</li>
	    <li>Item 36</li>
	    <li>Item 37</li>
	    <li>Item 38</li>
	    <li>Item 39</li>
	    <li>Item 40</li>
	</ul>
	
<script type="text/javascript">
$(document).ready(function(){
	
	$('#myul').sortable({
		//onChange: function() { console.log('Position change during drag'); },
		//onUpdate: function() { console.log('Position changed'); }
	});
	$('#myul2').sortable( { items: 'li', containment: 'sortable', hoverClass: 'hover' } );
	$('#myul3').sortable({
		animated: true
	});

});
</script>
</body>
</html>

